import React, {Component} from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { WebView } from 'react-native-webview';

const runFirst = `
document.body.style.backgroundColor = 'red';
setTimeout(function() { window.alert('hi') }, 2000);
true; // note: this is required, or you'll sometimes get silent failures
`;
const PolicyHTML = require('../data/testwebview.html');

type Props = {};
type State = {};

class WebComponent extends Component<Props, State> {

componentWillUnmount(): void {
    // console.log("componentWillUnmount");
}

componentDidMount(): void {
    // console.log("componentDidMount");
}

  render() {
    return <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
            <WebView
  // ref = {(webview) => {
  //   webView == webview;
  // }}
  originWhitelist={['*']}
//  style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: 'black'}}
//  source={{ uri: '../data/testwebview.html' }
// source={{ uri: 'file:// data/testwebview.html' }}
  //  source={{ uri:'../data/testwebview.html'}}
// source={PolicyHTML}
style={{flex:1, marginTop : 44}}
// source={{ html: '<h1>Hello world</h1>' }}
source={{ uri: 'https://baidu.com' }}
javaScriptEnabled={true}
containerStyle={{margin:20}}
injectedJavaScript={runFirst}
// onNavigationStateChange={(navState) => {
// Keep track of going back navigation within component
// this.canGoBack = navState.canGoBack;
// }}
onMessage={(event) => {
  // Alert.alert(event.nativeEvent.data)
}}
onLoadEnd={(syntheticEvent)=>{
  // this.webView.current.postMessage(JSON.stringify({test:'Hello from RN'}))
}}

// header={{'my-custom-header-key': 'my-custom-header-value'}}

/>
        </View>;
  }
}

export default WebComponent;
